<template>
  <div class="app-build">
    <div class="bread-line">
      <span>当前：开发中心&nbsp;/&nbsp;</span>
      <span>应用搭建&nbsp;/&nbsp;</span>
      <span class="link">调查监测举证应</span>
    </div>
    <div class="content">
      <div class="top-step">
        <div class="step-node"
          @click="curStep=1"
          :class="{active: curStep===1}">
          <span class="num">1</span>
          <span class="text">应用基本信息</span>
        </div>
        <div class="step-node"
          @click="curStep=2"
          :class="{active: curStep===2}">
          <span class="num">2</span>
          <span class="text">功能模块配置</span>
        </div>
        <div class="step-node"
          @click="curStep=3"
          :class="{active: curStep===3}">
          <span class="num">3</span>
          <span class="text">预览及发布</span>
        </div>
      </div>
      <div class="vertical-step"
        v-if="curStep===1">
        <el-form ref="form"
          label-position="left"
          :model="form"
          label-width="160px">
          <div class="vstep-box">
            <div class="vstep-title">
              <span class="num">1</span>
              <span class="text">基本信息</span>
            </div>
            <div class="vstep-cont">
              <el-form-item label="应用名称：">
                <el-input v-model="form.appsName"
                  :maxlength="20"
                  placeholder="请输入应用名称"></el-input>
                <div class="explain">该名称将展示在登录页及系统菜单，最长20个文字</div>
              </el-form-item>
              <el-form-item label="应用描述：">
                <el-input type="textarea"
                  placeholder="请输入应用描述"
                  :rows="3"
                  resize="none"
                  v-model="form.appsDesc"></el-input>
              </el-form-item>
            </div>
          </div>
          <div class="vstep-box">
            <div class="vstep-title">
              <span class="num">2</span>
              <span class="text">选择业务功能</span>
            </div>
            <div class="vstep-cont">
              <div class="func-top">
                <div class="functop-item">
                  <img class="func-img"
                    src="@/assets/image/bus-img/xsgl.png"
                    alt="">
                  <div class="functop-right">
                    <div class="label">线索管理</div>
                    <div class="text">数据汇聚统一管理</div>
                    <div><img class="func-img"
                        src="@/assets/image/bus-img/doc.png"
                        alt=""></div>
                  </div>
                </div>
                <div class="functop-item">
                  <img class="func-img"
                    src="@/assets/image/bus-img/xsgl.png"
                    alt="">
                  <div class="functop-right">
                    <div class="label">智能分析</div>
                    <div class="text">图层叠加分析</div>
                    <div><img class="func-img"
                        src="@/assets/image/bus-img/doc.png"
                        alt=""></div>
                  </div>
                </div>
                <div class="functop-item">
                  <img class="func-img"
                    src="@/assets/image/bus-img/xsgl.png"
                    alt="">
                  <div class="functop-right">
                    <div class="label">外业核查</div>
                    <div class="text">举证任务配置（内外网）</div>
                    <div><img class="func-img"
                        src="@/assets/image/bus-img/doc.png"
                        alt=""></div>
                  </div>
                </div>
                <img v-if="curCheck === 'a'"
                  class="functop-check"
                  src="@/assets/image/bus-img/done-fill.png"
                  alt="">
                <img v-else
                  @click="curCheck = 'a'"
                  class="functop-check"
                  src="@/assets/image/bus-img/done.png"
                  alt="">
              </div>
              <div class="func-bottom">
                <div class="funcbot-item">
                  <img class="func-img"
                    src="@/assets/image/bus-img/xsgl.png"
                    alt="">
                  <div class="functop-right">
                    <div class="label">一张图</div>
                    <div class="text">业务数据地图展示</div>
                    <div><img class="func-img"
                        src="@/assets/image/bus-img/doc.png"
                        alt=""></div>
                  </div>
                  <img v-if="curCheck === 'b'"
                    class="funcbot-check"
                    src="@/assets/image/bus-img/done-fill.png"
                    alt="">
                  <img v-else
                    @click="curCheck = 'b'"
                    class="funcbot-check"
                    src="@/assets/image/bus-img/done.png"
                    alt="">
                </div>
                <div class="funcbot-item">
                  <img class="func-img"
                    src="@/assets/image/bus-img/xsgl.png"
                    alt="">
                  <div class="functop-right">
                    <div class="label">决策支持</div>
                    <div class="text">统计分析报表展示</div>
                    <div><img class="func-img"
                        src="@/assets/image/bus-img/doc.png"
                        alt=""></div>
                  </div>
                  <img v-if="curCheck === 'c'"
                    class="funcbot-check"
                    src="@/assets/image/bus-img/done-fill.png"
                    alt="">
                  <img v-else
                    @click="curCheck = 'c'"
                    class="funcbot-check"
                    src="@/assets/image/bus-img/done.png"
                    alt="">
                </div>
              </div>
            </div>
          </div>
          <div class="vstep-box">
            <div class="vstep-title">
              <span class="num">3</span>
              <span class="text">个性化定制</span>
            </div>
            <div class="vstep-cont">
              <el-form-item label="访问地址：">
                <el-input v-model="form.platformUrl"
                  placeholder="请输入访问地址"></el-input>
                <div class="explain">以审核通过后地址为准，内外网后缀一致，最长8个字母</div>
              </el-form-item>
              <el-form-item label="版权支持单位：">
                <el-input v-model="form.bqszdw"
                  :maxlength="20"
                  placeholder="请输入单位名称"></el-input>
                <div class="explain">该信息将显示在登录页底部，为空则不显示，最长20个文字</div>
              </el-form-item>
              <el-form-item label="技术支持单位：">
                <el-input v-model="form.jszcdw"
                  :maxlength="20"
                  placeholder="请输入单位名称"></el-input>
                <div class="explain">该信息将显示在登录页底部，为空则不显示，最长20个文字</div>
              </el-form-item>
              <el-form-item label="应用logo：">
                <el-upload class="upload-demo"
                  ref="logoImg"
                  action=""
                  :auto-upload="false"
                  :on-change="uploadChangeLogo"
                  :limit="1"
                  accept=".jpg,.png"
                  list-type="picture">
                  <div class="primary">上传图片</div>
                  <div slot="tip"
                    class="el-upload__tip">
                    <div><span class="text-btn"
                        @click="resetUpload('logoImg')">重置</span></div>
                    <div class="explain">默认为重庆调查云logo，图片格式为PNG、JPG，建议尺寸40px*40px</div>
                  </div>
                </el-upload>
              </el-form-item>
              <el-form-item label="Web端登录页背景图：">
                <el-upload class="upload-demo"
                  ref="webBgImg"
                  action=""
                  :auto-upload="false"
                  :on-change="uploadChangeBg"
                  :limit="1"
                  accept=".jpg,.png"
                  list-type="picture">
                  <span class="primary">上传图片</span>
                  <div slot="tip"
                    class="el-upload__tip">
                    <div><span class="text-btn"
                        @click="resetUpload('webBgImg')">重置</span></div>
                    <div class="explain">提供默认背景图，图片格式为PNG、JPG，建议尺寸1920px*1080px</div>
                  </div>
                </el-upload>
              </el-form-item>
              <el-form-item label="App业务应用背景图：">
                <el-upload class="upload-demo"
                  ref="appBgImg"
                  action=""
                  :auto-upload="false"
                  :on-change="uploadChangeAppBg"
                  :limit="1"
                  accept=".jpg,.png"
                  list-type="picture">
                  <span class="primary">上传图片</span>
                  <div slot="tip"
                    class="el-upload__tip">
                    <div><span class="text-btn"
                        @click="resetUpload('appBgImg')">重置</span></div>
                    <div class="explain">默认为重庆调查云logo，图片格式为PNG、JPG，建议尺寸525px*304px</div>
                  </div>
                </el-upload>
              </el-form-item>
            </div>
          </div>
        </el-form>
        <div class="sub-btn">
          <el-button>取消</el-button>
          <el-button type="primary"
            @click="next">下一步</el-button>
          <el-button>保存并返回</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { addBusApps, findBusFunctions } from '@/api/module/business';
  const fidsEmun = {
    a: ['智能分析', '线索管理', '外业举证'],
    b: ['一张图'],
    c: ['决策支持']
  };
  export default {
    name: 'app',
    data() {
      return {
        curStep: 1,
        form: {
          appsName: '',
          appsDesc: '',
          platformUrl: '',
          jszcdw: '',
          status: 0,
          busFunctionIds: []
        },
        formFile: {
          logfile: null,
          loginfile: null,
          backgroundfile: null
        },
        curCheck: 'a',
        funcIds: [],
        fileList: []
      };
    },
    created() {
      this.getConfig();
    },
    methods: {
      getConfig() {
        findBusFunctions().then((res) => {
          console.log(res);
          this.funcIds = res.data;
        });
      },
      getBusFuncId() {
        let list = fidsEmun[this.curCheck];
        this.form.busFunctionIds = this.funcIds.filter((item) => list.includes(item.functionName)).map((ite) => ite.id);
      },
      uploadChangeLogo(file) {
        this.formFile.logfile = file.raw;
      },
      uploadChangeBg(file) {
        this.formFile.loginfile = file.raw;
      },
      uploadChangeAppBg(file) {
        this.formFile.backgroundfile = file.raw;
      },
      resetUpload(name) {
        this.$refs[name].clearFiles();
      },
      next() {
        this.getBusFuncId();
        let json = JSON.stringify(this.form);
        const blob = new Blob([json], { type: 'application/json' });
        let params = { param: blob, ...this.formFile };
        addBusApps(params).then((res) => {
          console.log(res);
        });
      }
    }
  };
</script>

<style scoped lang="scss">
  $uploaditem-H: 92px;

  .app-build {
    width: 100%;
    .bread-line {
      padding: 20px 0;
      margin-left: 240px;
      .link {
        color: $--primary-color;
      }
    }
    .content {
      width: 100%;
      padding: 0 240px;
      box-sizing: border-box;
    }
    .top-step {
      width: 100%;
      height: 60px;
      line-height: 60px;
      display: flex;
      .step-node {
        flex: 1;
        text-align: center;
        background-color: $--block-bg;
        .num {
          display: inline-block;
          vertical-align: middle;
          width: 32px;
          height: 32px;
          line-height: 32px;
          border-radius: 50%;
          text-align: center;
          margin-right: 10px;
          background-color: $--block-bg-deeper;
        }
        .text {
          display: inline-block;
          vertical-align: middle;
        }
        &.active {
          background-color: $--primary-color;
          .num {
            background-color: #fff;
            color: $--primary-color;
          }
          .text {
            color: #fff;
          }
        }
      }
    }
    .vertical-step {
      margin-top: 43px;
      margin-left: 300px;
      width: 860px;
      .vstep-box {
        position: relative;
        border-left: 1px solid $--border-color;
        padding: 30px;
        .vstep-title {
          position: absolute;
          left: -16px;
          top: -16px;
          .num {
            display: inline-block;
            vertical-align: middle;
            width: 32px;
            height: 32px;
            line-height: 32px;
            border-radius: 50%;
            text-align: center;
            margin-right: 10px;
            background-color: $--primary-bg;
            color: $--primary-color;
          }
          .text {
            display: inline-block;
            vertical-align: middle;
          }
        }
        .func-top {
          padding: 20px 20px 20px 0;
          border: 1px solid $--border-color;
          border-radius: $--general-radius;
          margin-bottom: 20px;
          .functop-check {
            position: absolute;
            right: 44px;
            top: 40px;
          }
        }
        .functop-item {
          position: relative;
          display: inline-block;
          padding-left: 20px;
          width: 230px;
        }
        .functop-item + .functop-item {
          border-left: 1px solid $--border-color;
        }
        .functop-right {
          display: inline-block;
          .label {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 10px;
          }
          .text {
            color: $--secondary-text;
            margin-bottom: 10px;
          }
        }
        .funcbot-item {
          position: relative;
          padding: 20px 50px 20px 20px;
          display: inline-block;
          border: 1px solid $--border-color;
          border-radius: $--general-radius;
          margin-right: 20px;
          .funcbot-check {
            position: absolute;
            right: 14px;
            top: 12px;
          }
        }
        .func-img {
          vertical-align: top;
          margin-right: 16px;
        }
      }
      .upload-demo {
        position: relative;
        height: $uploaditem-H;
        .primary {
          color: $--primary-color;
        }

        .el-upload__tip {
          position: absolute;
          top: 0;
          right: 0;
          text-align: right;
          line-height: 30px;
        }
        .text-btn {
          cursor: default;
        }
        :deep(.el-upload) {
          position: absolute;
          right: 40px;
          z-index: 10;
          top: 3px;
        }
        :deep(.el-upload-list) {
          float: left;
        }
        :deep(.el-upload-list--picture .el-upload-list__item) {
          margin-top: 0;
          padding: 0;
          border: none;
        }
        :deep(.el-upload-list--picture .el-upload-list__item-thumbnail) {
          margin-left: 0;
          width: 100%;
          max-width: 150px;
        }
        :deep(.el-upload-list--picture .el-upload-list__item-name) {
          display: none;
        }
      }
      .explain {
        text-align: right;
        color: $--secondary-text;
      }
      .sub-btn {
        margin-top: 20px;
        width: 100%;
        text-align: center;
        padding-bottom: 40px;
      }
    }
  }
</style>